<template>
    <div id="offline_content">
      <div class="position_content">
        <div class="map">
          <el-amap vid="amap" :center="center" class="map" complete="getLocation" :plugin="plugin" style="opacity: 0.8;width: 100%"></el-amap>
        </div>
        <div class="pos">
          <div>您的位置：{{position}}</div>
          <div class="form">
            <el-form ref="subform" size="mini" label-width="80px" label-position="left" :rules="rules" :model="form" style="text-align: center">
              <el-form-item label="位置">
                <el-input v-model="form.position" disabled></el-input>
              </el-form-item>
              <el-form-item label="回收方式" prop="way">
                <el-radio-group v-model="form.way" >
                  <el-radio border label="邮寄">邮寄</el-radio>
                  <el-radio border label="上门收货">上门收货</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input v-model="form.phone" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"></el-input>
              </el-form-item>
            </el-form>
            <el-button :disabled="available" type="primary" @click="submit('subform')">提交</el-button>
            <div v-show="available === true" style="font-size: 12px">使用线下回收请先登录</div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  name: "Offline",
  data(){
    const self = this;
    return{
      // center: [113.753602,34.765515],
      center: [0,0],
      lng: 0,
      lat: 0,
      loaded: false,
      pos:'',
      city:'',
      province:'',
      district:'',
      form:{},
      township:'',
      plugin: [{
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        timeout: 100,          //超过10秒后停止定位，默认：无穷大
        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
        convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true,        //显示定位按钮，默认：true
        buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy:true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
        extensions:'all',
        pName: 'Geolocation',
        events: {
          init(o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              console.log(result);
              self.pos = result
              if (result && result.position) {
                self.lng = result.position.lng;
                self.lat = result.position.lat;
                self.center = [self.lng, self.lat];
                self.position = result.formattedAddress;
                self.province = result.addressComponent.province; //省份
                self.city = result.addressComponent.city; //城市
                self.township = result.addressComponent.township; //街道
                self.district = result.addressComponent.district;  //区
                self.loaded = true;
                self.form.position = result.formattedAddress;
                self.$nextTick();
              }
            });
          },
          position:''
        },
      }],
      selfInfo:{},
      available:false,
      rules:{
        way:[{
          required:true,message: '请选择回收方式', trigger: 'change'
        }]
      }
    }
  },
  watch:{
    pos(o){
      console.log(o.formattedAddress);
      this.position = o.formattedAddress;
    }
  },
  created() {
  },
  updated() {
    this.getPos();
  },
  mounted() {
    this.getSelf();
    this.checkState();
  },
  methods: {
    checkState(){
      if (window.sessionStorage.getItem('id') == null){
        this.available = true
      }else {
        this.available = false
      }
    },
    submit(subform){
      let username = window.sessionStorage.getItem('username')
      this.$refs[subform].validate((valid)=>{
        if (valid){
          if (username !== 'admin'){
            this.axios.post('/api/setOfflineOrder',{
              position:this.position,
              way:this.form.way,
              name:this.form.name,
              phone:this.form.phone,
              Uid:window.sessionStorage.getItem('id')
            }).then(res=>{
              console.log(res);
              this.$router.push('/success');
            }).catch(err=>{
              console.log(err)
            })
          }else {
            this.$message.warning('请管理员不要乱操作')
          }
        }else {
          return false
        }
      })
      // console.log(this.position);
      // console.log(this.way);
      // console.log(this.selfInfo.name);
      // console.log(this.selfInfo.phone)
    },
    getSelf(){
      this.axios.get('/api/getSelf',{params:{
        id:window.sessionStorage.getItem('id')
      }}).then(res=>{
        console.log(res.data);
        this.form.name = res.data.name;
        this.form.phone = res.data.phone
      }).catch(err=>{
        console.log(err)
      })
    },
    getPos(){
      console.log(this.position)
    },
  }
}
</script>

<style scoped>
  .pos{
    margin: 0 auto;
    width: 85%;
    /*background: #1ab2ff;*/
    height: 80px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 80px;
    border-radius: 80px;
    padding-left: 50px;
  }
  #offline_content{
    height: 100%;
    background: url("../assets/offline.jpg") no-repeat fixed center;
    /*background-color: #3a8ee6;*/
    /*margin-top: 20px;*/
    padding-top: 10px;
    box-shadow: 0 0 5px 5px white inset;
  }
  .map{
    height: 400px;
    width: 40%;
    margin: 0 auto;
    box-shadow: 0 0 5px 5px #fff inset;
  }
  .position_content{
    display: flex;
    justify-content: space-around;
    padding: 0 40px 0 40px;
  }
  .form{
    background: #fff;
    padding: 15px 20px 10px 20px;
    border-radius: 15px;
    margin: 0 auto;
    width: 60%;
    line-height: 28px;
    height: 260px;
  }
</style>
